<!-- 组件说明 -->
<template>
  <div class="footBar">
    <div @click="changeMenu" :class="{ isActive: active }">
      <span class="item_icon">
        <i class="iconfont icon-waimai"></i>
      </span>
      <span>背经</span>
    </div>
    <div @click="changeMenu('fuxi')" :class="{ isActive: fuxiActive }">
    <span class="item_icon">
        <i class="iconfont icon-waimai"></i>
      </span>
      <span>复习</span>
    </div>
  </div>
</template>

<script>
//import x from ''
export default {
  components: {},
  data() {
    return {
      active: true,
      fuxiActive: false
    };
  },
  computed: {},
  methods: {
    changeMenu(type){
      if(type==="fuxi"){
        this.fuxiActive = !this.fuxiActive
        this.active = false
      }else{
        this.active = !this.active
        this.fuxiActive = false
      }
      
    }
  }
};
</script>

<style lang='stylus' scoped>
//@import url()
  .isActive
    background-color green 
    color #fff
    font-weight 900
  .footBar
    position fixed
    bottom 0
    width 100%
    height 50px
    background-color pink 
    // box-size border  
    >div
      position relative
      float left
      width 50%
      line-height: 50px
      font-size 16px
      font-weight: bold
      // &:first-child
      //   border-right: 1px solid yellow
      &:first-child:after
        content: ''
        position absolute
        top: 0
        right 0
        display block
        width 1px
        height 50px
        background-color: #000




</style>